<script>
import * as echarts from 'echarts'

let categoryDescEcharts = null
export default {
  name: 'FocusDeviceDescription',
  props: {
    queryForm: {
      required: true
    },
    projectList: {
      required: true,
      default: []
    },
    roomList: {
      required: true,
      default: []
    }
  },
  watch: {
    queryForm: {
      async handler(val) {
        const param = {
          sceneProjectId: val.sceneProjectId,
          startDate: val.startTime,
          endDate: val.endTime
        }
        if (val.roomInfo != null && val.roomInfo.length > 0) {
          const sceneEdificeIds = []
          const sceneFloorIds = []
          const sceneRoomIds = []
          val.roomInfo.forEach(item => {
            if (item.length > 0) {
              sceneEdificeIds.push(item[0])
            }
            if (item.length > 1) {
              sceneFloorIds.push(item[1])
            }
            if (item.length > 2) {
              sceneRoomIds.push(item[2])
            }
          })
          param.sceneEdificeId = sceneEdificeIds.join(',')
          param.sceneFloorId = sceneFloorIds.join(',')
          param.sceneRoomId = sceneRoomIds.join(',')
        }
        const res = await this.$api.runtimeOptimizationReport.focusEnergyConsumption(param)
        this.startTime = res.data.startTime
        this.endTime = res.data.endTime
        this.focusEnergyConsumptionList = res.data.dataList
        this.$emit('focusEnergyData', {
          startTime: this.startTime,
          endTime: this.endTime,
          focusEnergyConsumptionList: this.focusEnergyConsumptionList
        })
        const elevatorEnergyRes = await this.$api.runtimeOptimizationReport.elevatorEnergy(param)
        this.elevatorEnergyList = elevatorEnergyRes.data
        const chargingStationEnergyRes = await this.$api.runtimeOptimizationReport.chargingStationEnergy(param)
        this.chargingStationEnergyList = chargingStationEnergyRes.data
        this.initEcharts()
      },
      deep: true,
      immediate: true
    }
  },
  data() {
    return {
      startTime: null,
      endTime: null,
      focusEnergyConsumptionList: [],
      elevatorEnergyList: [],
      chargingStationEnergyList: []
    }
  },
  computed: {
    getProjectNames() {
      return this.projectList.filter(project => this.queryForm.sceneProjectId == null || project.value === this.queryForm.sceneProjectId)
        .map(project => project.label).join('，')
    },
    getSceneInfo() {
      // const sceneInfo = [];
      // if(this.queryForm.sceneEdificeId != null || this.queryForm.sceneFloorId.length > 0) {
      //   // const sceneEdificeNames
      // }
      return null;
    },
    getElevatorEnergyMaxData() {
      if (this.elevatorEnergyList.length > 0) {
        return this.elevatorEnergyList.slice().sort((a, b) => b.meterValue - a.meterValue)[0]
      }
      return {}
    },
    getElevatorEnergyMinData() {
      if (this.elevatorEnergyList.length > 0) {
        return this.elevatorEnergyList.slice().sort((a, b) => a.meterValue - b.meterValue)[0]
      }
      return {}
    },
    getChargingStationEnergyMaxData() {
      if (this.chargingStationEnergyList.length > 0) {
        return this.chargingStationEnergyList.slice().sort((a, b) => b.meterValue - a.meterValue)[0]
      }
      return {}
    },
    getChargingStationEnergyMinData() {
      if (this.chargingStationEnergyList.length > 0) {
        return this.chargingStationEnergyList.slice().sort((a, b) => a.meterValue - b.meterValue)[0]
      }
      return {}
    },
    getMaxData() {
      if (this.focusEnergyConsumptionList.length > 0) {
        return this.focusEnergyConsumptionList.slice().sort((a, b) => b.value - a.value)[0]
      }
      return {}
    },
    getMinData() {
      if (this.focusEnergyConsumptionList.length > 0) {
        return this.focusEnergyConsumptionList.slice().sort((a, b) => a.value - b.value)[0]
      }
      return {}
    }
  },
  methods: {
    initEcharts() {
      this.disposeEcharts()
      this.$nextTick(() => {
        categoryDescEcharts = echarts.init(document.getElementById('categoryDescEcharts'))
        categoryDescEcharts.setOption({
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          series: [
            {
              name: '分类统计能耗情况',
              type: 'pie',
              radius: '50%',
              data: this.focusEnergyConsumptionList,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        })
      })
    },
    disposeEcharts() {
      if (categoryDescEcharts != null) {
        categoryDescEcharts.dispose()
        categoryDescEcharts = null
      }
    }
  },
  destroyed() {
    this.disposeEcharts()
  }
}
</script>

<template>
  <div>
    <h2>02、重点设备能耗说明</h2>
    <div class="category-box">
      <h3>2.1、 分类统计能耗情况</h3>
      <div class="content">
        <div id="categoryDescEcharts" style="width: 60%;height: 320px;margin: 0 15%"></div>
        <table>
          <thead>
          <tr>
            <th>产品类型</th>
            <th>能耗量(kgce)</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="item in focusEnergyConsumptionList" :key="item.name">
            <td>{{ item.name }}</td>
            <td>{{ item.value }}</td>
          </tr>
          </tbody>
        </table>
        <div class="desc">
          <p>
            展示量化场景在特定时间段内的重点设备的能耗情况。{{ getProjectNames }} {{ getSceneInfo }}在{{ startTime
            }}-{{ endTime }}中,
            能耗总量为 {{ focusEnergyConsumptionList.map(item => item.value).reduce((a, b) => a + b, 0) }} kgce，
            其中{{ getMaxData.name }}的能耗量最高，为{{ getMaxData.value }}kgce；
            {{ getMinData.name }}的能耗量最低，为{{ getMinData.value }} kgce。</p>
        </div>
      </div>
    </div>
    <div class="elevator-box">
      <h3>2.2、 电梯的能耗情况</h3>
      <div class="content">
        <table style="width: 80%; margin: 0 5%">
          <thead>
          <tr>
            <th>设备名称</th>
            <th>所属项目</th>
            <th>所属场景</th>
            <th>能耗量(kgce)</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="item in elevatorEnergyList" :key="item.id">
            <td>{{ item.meterDeviceName }}</td>
            <td>{{ item.sceneProjectName }}</td>
            <td>{{ item.sceneInfo }}</td>
            <td>{{ item.meterValue }}</td>
          </tr>
          </tbody>
        </table>
        <div class="desc">
          <p>
            {{ getProjectNames }}{{ getSceneInfo }}在{{ startTime }}-{{ endTime }}中,{{ getElevatorEnergyMaxData.meterDeviceName
            }}的能耗量最高，为{{ getElevatorEnergyMaxData.meterValue }} kgce，
            {{ getElevatorEnergyMinData.meterDeviceName }}的能耗量最低，为{{ getElevatorEnergyMinData.meterValue }}kgce。
          </p>
        </div>
      </div>
    </div>
    <div class="charging-box">
      <h3>2.3、 充电桩的能耗情况</h3>
      <div class="content">
        <table style="width: 80%; margin: 0 5%">
          <thead>
          <tr>
            <th>设备名称</th>
            <th>所属项目</th>
            <th>所属场景</th>
            <th>能耗量(kgce)</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="item in chargingStationEnergyList" :key="item.id">
            <td>{{ item.meterDeviceName }}</td>
            <td>{{ item.sceneProjectName }}</td>
            <td>{{ item.sceneInfo }}</td>
            <td>{{ item.meterValue }}</td>
          </tr>
          </tbody>
        </table>
        <div class="desc">
          <p>
            {{ getProjectNames }}{{ getSceneInfo }}在{{ startTime }}-{{ endTime }}中,{{ getChargingStationEnergyMaxData.meterDeviceName
            }}的能耗量最高，为{{ getChargingStationEnergyMaxData.meterValue }}kgce，
            {{ getChargingStationEnergyMinData.meterDeviceName
            }}的能耗量最低，为{{ getChargingStationEnergyMinData.meterValue }}kgce。
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.category-box, .elevator-box, .charging-box {
  padding: 0 5%;

  table {
    border-collapse: collapse;
    width: 60%;
    margin: 0 10%;
    font-size: 16px;
    font-weight: 500;

    th {
      border: 1px solid rgba(0, 0, 0, 0.6);
      padding: 6px 10px;
      background-color: rgb(2, 149, 144);
      text-align: center;
    }

    td {
      border: 1px solid #000000;
      padding: 6px 10px;
      text-align: center;
    }
  }

  .content {
    padding: 0 5%;

    p {
      text-indent: 2em;
      line-height: 28px;
    }
  }
}
</style>
